<template>
  <el-menu
    :default-active="activeMenu"
    mode="horizontal"
    @select="handleSelect"
  >
    <template v-for="(item, index) in topMenus">
      <el-menu-item :style="{'--theme': theme}" :index="item.id+''" :key="index" v-if="index < visibleNumber"
        ><svg-icon :icon-class="item.icon" />
        {{ item.moduleName }}</el-menu-item
      >
    </template>

    <!-- 顶部菜单超出数量折叠 -->
    <el-submenu index="more" v-if="topMenus.length > visibleNumber">
      <template slot="title">更多菜单</template>
      <template v-for="(item, index) in topMenus">
        <el-menu-item
          :index="item.id+''"
          :key="index"
          v-if="index >= visibleNumber"
          ><svg-icon :icon-class="item.icon" />
          {{ item.moduleName }}</el-menu-item
        >
      </template>
    </el-submenu>
  </el-menu>
</template>

<script>
import { constantRoutes } from "@/router";

export default {
  data() {
    return {
      // 顶部栏初始数
      visibleNumber: 5,
      // 是否为首次加载
      isFrist: false
    };
  },
  computed: {
    theme() {
      return this.$store.state.settings.theme;
    },
    // 顶部显示菜单
    topMenus() {
      return this.$store.state.permission.topbarRouters;
    },
    // 所有的路由信息
    routers() {
      return this.$store.state.permission.defaultRoutes;
    },
    // 默认激活的菜单
    activeMenu() {
      const path = this.$route.path
      let activeModuleId = this.routers[0].meta.moduleId
      if (path.lastIndexOf("/") <= 0) {
        return activeModuleId+'';
      }
      //点击tagsview时切换顶部模块菜单
      this.routers.some((router) => {
        if(path.includes(router.path) || path == router.path){//当前路由包含或者等于
          activeModuleId = router.meta.moduleId
          return true
        }
      })
      this.activeRoutes(activeModuleId);
      return activeModuleId+'';
    },
  },
  beforeMount() {
    window.addEventListener('resize', this.setVisibleNumber)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.setVisibleNumber)
  },
  mounted() {
    this.setVisibleNumber();
  },
  methods: {
    // 根据宽度计算设置显示栏数
    setVisibleNumber() {
      const width = document.body.getBoundingClientRect().width / 3;
      this.visibleNumber = parseInt(width / 85);
    },
    // 菜单选择事件
    handleSelect(moduleId, keyPath) {
      let tmpModule = undefined
      this.topMenus.some((module)=>{
        if(moduleId==module.id){
          tmpModule = module
          return true
        }
      })
      if(tmpModule==undefined){
        // 显示左侧联动菜单
        this.activeRoutes(moduleId);
      }else if(tmpModule.url && this.ishttp(tmpModule.url)){
        // http(s):// 路径新窗口打开
        window.open(tmpModule.url, "_blank");
      }else if (tmpModule.url && tmpModule.url.indexOf("/redirect") !== -1){
        // /redirect 路径内部打开
        this.$router.push({ path: moduleId.replace("/redirect", "") });
      }else{
        // 显示左侧联动菜单
        this.activeRoutes(moduleId);
      }
    },
    // 当前激活的路由
    activeRoutes(moduleId) {
      var routes = [];
      this.routers.map((router) => {
          if(moduleId == router.meta.moduleId){
            routes.push(router)
          }
       })
      if(routes.length > 0) {
        this.$store.commit("SET_SIDEBAR_ROUTERS", routes);
      }
      return routes;
    },
    ishttp(url) {
      return url.indexOf('http://') !== -1 || url.indexOf('https://') !== -1
    }
  },
}
</script>

<style lang="scss">
.el-menu--horizontal > .el-menu-item {
  float: left;
  height: 50px;
  line-height: 50px;
  margin: 0;
  border-bottom: 3px solid transparent;
  color: #999093;
  padding: 0 5px;
  margin: 0 10px;
}

.el-menu--horizontal > .el-menu-item.is-active {
  border-bottom: 3px solid #{'var(--theme)'};
  color: #303133;
}

/* submenu item */
.el-menu--horizontal > .el-submenu .el-submenu__title {
	height: 50px !important;
	line-height: 50px !important;
}
</style>
